import { Component, Input, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
import { RenderComponentConfig } from '../../../models/render-component-config';
import { PageMapTool } from '../../../tools/page-map-tool';
import { BaseContainerComponent } from '../base-container.component';

@Component({
  selector: 'zepride-work-flow-container',
  templateUrl: './work-flow-container.component.html',
  styleUrls: ['./work-flow-container.component.less']
})
export class WorkFlowContainerComponent extends BaseContainerComponent implements AfterViewInit {

  @ViewChild('pageViewContainerRef', { read: ViewContainerRef }) pageViewContainerRef: ViewContainerRef;
  private _workflow;

  @Input() set workflow(data) {
    this._workflow = data;
    this.currentFlowNode = data.flowNodes[0];
  }

  get workflow() {
    return this._workflow;
  }

  currentFlowNode;

  ngAfterViewInit(): void {
    this.renderPages(this.currentFlowNode);
  }

  async renderPages(flowNode) {
    const pages = flowNode.pages;
    const page = pages[0];
    const config = this.generateRenderConfig(page);
    if (config) {
      this.engineService.renderComponent(config);
    }
  }

  generateRenderConfig(page) {
    const renderItem = PageMapTool.current.getRenderItem('page', page);
    if (renderItem) {
      const config: RenderComponentConfig = {
        renderItem,
        viewContainerRef: this.pageViewContainerRef
      };
      return config;
    } else {
      return null;
    }
  }

}
